<template>
	<div class="">
		<loading v-if="isloading"></loading>
		<!--<base-header :pName="pName"></base-header>-->
		<div class="brace-bg"></div>
		<div class="brace-nav">
			<div class="brace-plan-nav">
				<div @click="check(1)" class="brace-plan-nav-div">
					<img src="../../assets/icon/time_03.gif" />
					<span v-if="type=='1'" class="brance-selected">计划时间</span>
				</div>
				<div @click="check(2)" class="brace-plan-nav-div">
					<img src="../../assets/icon/time_05.gif" />
					<span v-if="type=='2'" class="brance-selected">日历</span>
				</div>
				<div @click="check(3)" class="brace-plan-nav-div">
					<img src="../../assets/icon/time_07.gif" />
					<span v-if="type=='3'" class="brance-selected">时间轴</span>
				</div>
			</div>
			<span @click="setBrace" class="brace-setting">设置</span>
		</div>
		<!--周期-->
		<brace-time @hideLoad="hideLoad" v-if="type=='1'" :step='now_steps' :plan_id='id' :steps_days='steps_days'></brace-time>
		<!--日历-->
		<brace-calendar v-if="type=='2'" :step='now_steps' :plan_id='id'></brace-calendar>
		<!--时间-->
		<brace-date v-if="type=='3'" :step='now_steps' :plan_id='id' :event_msg='event_msg'></brace-date>
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	import Loading from "@/components/common/Loading"
	import BraceTime from "@/components/plan/BraceTime"
	import BraceCalendar from "@/components/plan/BraceCalendar"
	import BraceDate from "@/components/plan/BraceDate"
	export default {
		name: 'BraceHome',
		components: {
			BaseHeader,
			Loading,
			BraceTime,
			BraceCalendar,
			BraceDate
		},
		data() {
			return {
				id: '',
				pName: '',
				uid: '',
				token: '',
				url: '',
				oss_url: '',
				type: '',
				now_steps: '',
				step_data: '',
				event_msg: '',
				steps_days: '',
				isloading: true
			}
		},
		created() {

		},
		mounted() {
			this.pName = this.$route.query.pName;
			this.now_steps = this.$route.query.step;
			localStorage.setItem('pname', this.$route.query.pName);
			console.log(this.now_steps);
			this.uid = localStorage.getItem('uid');
			this.token = localStorage.getItem('token');
			this.getPlan();
		},
		methods: {
			//
			check(i) {
				this.type = i;
			},
			//
			hideLoad(d) {
				console.log(d);
				this.isloading = d;
			},
			//获取牙套计划
			getPlan() {
				var self = this;
				var data = {
					uid: self.uid,
					token: self.token
				};
				$.post(global.domain + global.API.braces_plan_info, data, function(msg) {
					if(msg.error == 0) {
						if (self.now_steps == '' || self.now_steps == null) {
							self.now_steps = msg.now_steps;	
						}						
						if(msg.has_plan == 0) {
							return;
						} else {
							self.event_msg = msg.braces_event;
							self.id = msg.braces_plan.id;
							self.bid = msg.braces_plan.braces_id;
							self.steps_days = msg.braces_plan.steps_days;
							self.check(1);
						}
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			},
			//修改牙套计划跳转
			setBrace() {
				this.$router.push({
					name: 'SettingBrace',
					params: {
						bid: this.bid
					},
					query: {
						pid: this.id
					}
				});
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/brace.css";
</style>